<template>
	<view>
		<u-tabbar :value="current" @change="onTabar" activeColor="#E5725F" :inactiveColor="inactiveColor" :fixed="fixed"
			:border="false" :placeholder="true">
			<u-tabbar-item text="首页">
				<template #active-icon>
					<image class="width_40 height_40" src="/static/image/tabbar/home_active.png">
					</image>
				</template>
				<template #inactive-icon>
					<image class="width_40 height_40" src="/static/image/tabbar/home.png"></image>
				</template>
			</u-tabbar-item>
			<u-tabbar-item>
				<template #active-icon>
					<image class="middle-icon" src="/static/image/tabbar/ai.png">
					</image>
				</template>
				<template #inactive-icon>
					<image class="middle-icon" src="/static/image/tabbar/ai.png"></image>
				</template>
			</u-tabbar-item>
			<u-tabbar-item text="我的">
				<template #active-icon>
					<image class="width_40 height_40" src="/static/image/tabbar/my_active.png">
					</image>
				</template>
				<template #inactive-icon>
					<image class="width_40 height_40" src="/static/image/tabbar/my.png"></image>
				</template>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	const props = defineProps(['current', 'inactiveColor', 'fixed'])
	const emit = defineEmits(['onReLaunch'])
	const onTabar = (e) => {
		switch (e) {
			case 0:
				// if (props.current != 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				// } else {
				// 	emit('onReLaunch', '/pages/index/index')
				// }
				break;
			case 1:
				if (props.current != 1) {
					uni.reLaunch({
						url: '/pages/dialogue/dialogue'
					})
				}
				break;
			case 2:
				// if (props.current != 1) {
					uni.reLaunch({
						url: '/pages/my/my'
					})
				// } else {
				// 	emit('onReLaunch', '/pages/my/my')
				// }
				break;
		}
	}
</script>

<style lang="scss" scoped>
	.middle-icon {
		width: 130rpx;
		height: 130rpx;
	}
</style>